<template>
	<view class="container">
		<!-- 房屋基本信息 -->
		<view class="section room-info">
			<view class="section-title">房屋信息</view>
			<view class="room-basic">
				<swiper class="room-swiper" indicator-dots autoplay circular>
					<swiper-item v-for="(img, index) in room.images" :key="index">
						<image :src="img" mode="aspectFill" class="room-image"></image>
					</swiper-item>
				</swiper>
				<view class="room-header">
					<text class="room-number">{{room.roomNumber}}</text>
					<text :class="['room-status', room.status === '已出租' ? 'status-rented' : 'status-empty']">{{room.status}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">地址：</text>
					<text class="info-value">{{room.address}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">面积：</text>
					<text class="info-value">{{room.area}}㎡</text>
				</view>
				<view class="info-item">
					<text class="info-label">户型：</text>
					<text class="info-value">{{room.layout}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">楼层：</text>
					<text class="info-value">{{room.floor}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">朝向：</text>
					<text class="info-value">{{room.orientation}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">装修：</text>
					<text class="info-value">{{room.decoration}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">月租：</text>
					<text class="info-value price">¥{{room.price}}/月</text>
				</view>
				<view class="info-item">
					<text class="info-label">押金：</text>
					<text class="info-value">{{room.deposit}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">配套设施：</text>
					<view class="facility-list">
						<view class="facility-item" v-for="(facility, index) in room.facilities" :key="index">
							<uni-icons :type="facilityIcons[facility]" size="16" color="#007AFF"></uni-icons>
							<text>{{facility}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 租户信息 -->
		<view class="section tenant-info" v-if="room.tenant">
			<view class="section-title">租户信息</view>
			<view class="tenant-basic">
				<view class="info-item">
					<text class="info-label">姓名：</text>
					<text class="info-value">{{room.tenant.name}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">电话：</text>
					<text class="info-value">{{room.tenant.phone}}</text>
					<button class="call-btn" @click="callTenant">拨打</button>
				</view>
				<view class="info-item">
					<text class="info-label">身份证：</text>
					<text class="info-value">{{room.tenant.idCard}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">入住时间：</text>
					<text class="info-value">{{room.tenant.checkInDate}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">到期时间：</text>
					<text class="info-value">{{room.tenant.endDate}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">剩余天数：</text>
					<text class="info-value" :class="{'warning': room.tenant.remainingDays <= 30}">{{room.tenant.remainingDays}}天</text>
				</view>
			</view>
		</view>
		
		<view class="section tenant-empty" v-else>
			<view class="empty-tenant">
				<text>暂无租户信息</text>
				<button class="add-tenant-btn" @click="addTenant">添加租户</button>
			</view>
		</view>
		
		<!-- 水电费信息 -->
		<view class="section utility-info" v-if="room.tenant">
			<view class="section-title">水电费信息</view>
			<view class="utility-basic">
				<view class="utility-item">
					<view class="utility-header">
						<text class="utility-name">水费</text>
						<text class="utility-status" :class="{'unpaid': !room.utilities.water.isPaid}">{{room.utilities.water.isPaid ? '已缴费' : '未缴费'}}</text>
					</view>
					<view class="utility-details">
						<view class="utility-row">
							<text class="utility-label">上次读数：</text>
							<text class="utility-value">{{room.utilities.water.lastReading}}吨</text>
							<text class="utility-date">({{room.utilities.water.lastDate}})</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">本次读数：</text>
							<text class="utility-value">{{room.utilities.water.currentReading}}吨</text>
							<text class="utility-date">({{room.utilities.water.currentDate}})</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">用量：</text>
							<text class="utility-value">{{room.utilities.water.usage}}吨</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">单价：</text>
							<text class="utility-value">¥{{room.utilities.water.price}}/吨</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">金额：</text>
							<text class="utility-value price">¥{{room.utilities.water.amount}}</text>
						</view>
					</view>
				</view>
				
				<view class="utility-item">
					<view class="utility-header">
						<text class="utility-name">电费</text>
						<text class="utility-status" :class="{'unpaid': !room.utilities.electricity.isPaid}">{{room.utilities.electricity.isPaid ? '已缴费' : '未缴费'}}</text>
					</view>
					<view class="utility-details">
						<view class="utility-row">
							<text class="utility-label">上次读数：</text>
							<text class="utility-value">{{room.utilities.electricity.lastReading}}度</text>
							<text class="utility-date">({{room.utilities.electricity.lastDate}})</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">本次读数：</text>
							<text class="utility-value">{{room.utilities.electricity.currentReading}}度</text>
							<text class="utility-date">({{room.utilities.electricity.currentDate}})</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">用量：</text>
							<text class="utility-value">{{room.utilities.electricity.usage}}度</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">单价：</text>
							<text class="utility-value">¥{{room.utilities.electricity.price}}/度</text>
						</view>
						<view class="utility-row">
							<text class="utility-label">金额：</text>
							<text class="utility-value price">¥{{room.utilities.electricity.amount}}</text>
						</view>
					</view>
				</view>
				
				<view class="utility-total">
					<text class="total-label">本月水电费合计：</text>
					<text class="total-value">¥{{totalUtilityFee}}</text>
				</view>
				
				<view class="utility-actions">
					<button class="update-btn" @click="updateUtility">更新读数</button>
					<button class="collect-btn" @click="collectUtility">收取费用</button>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<button class="action-btn edit" @click="editRoom">编辑房屋</button>
			<button class="action-btn" :class="room.status === '已出租' ? 'checkout' : 'checkin'" @click="toggleRoomStatus">
				{{room.status === '已出租' ? '退租' : '出租'}}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomId: 0,
				room: {
					id: 1,
					roomNumber: '101',
					address: '北京市海淀区西二旗大街58号院1号楼',
					status: '已出租',
					price: 3500,
					deposit: '押一付三',
					area: 65,
					layout: '2室1厅1卫',
					floor: '6/18层',
					orientation: '南',
					decoration: '精装修',
					facilities: ['冰箱', '洗衣机', '空调', '热水器', '电视', 'WiFi', '衣柜', '沙发'],
					images: [
						'https://img.zcool.cn/community/01c2865d3a9d1da80121b994d7a7c1.jpg',
						'https://img.zcool.cn/community/01a4f75d3a9d1da80121b994c6c9c4.jpg',
						'https://img.zcool.cn/community/01f6c85d3a9d1da80121b994c0f649.jpg'
					],
					tenant: {
						name: '张三',
						phone: '13812345678',
						idCard: '110101199001011234',
						checkInDate: '2023-01-01',
						endDate: '2024-01-01',
						remainingDays: 25
					},
					utilities: {
						water: {
							lastReading: 120,
							lastDate: '2023-05-01',
							currentReading: 135,
							currentDate: '2023-06-01',
							usage: 15,
							price: 5,
							amount: 75,
							isPaid: false
						},
						electricity: {
							lastReading: 1500,
							lastDate: '2023-05-01',
							currentReading: 1650,
							currentDate: '2023-06-01',
							usage: 150,
							price: 0.8,
							amount: 120,
							isPaid: false
						}
					}
				},
				facilityIcons: {
					'冰箱': 'home',
					'洗衣机': 'home',
					'空调': 'home',
					'热水器': 'home',
					'电视': 'home',
					'WiFi': 'wifi',
					'衣柜': 'home',
					'沙发': 'home'
				}
			};
		},
		computed: {
			totalUtilityFee() {
				if (!this.room.utilities) return 0;
				return this.room.utilities.water.amount + this.room.utilities.electricity.amount;
			}
		},
		onLoad(options) {
			// 获取传递的房间ID
			if (options.id) {
				this.roomId = parseInt(options.id);
				// 实际应用中，这里应该根据ID从服务器获取房间详情
				// this.fetchRoomDetail(this.roomId);
			}
		},
		methods: {
			fetchRoomDetail(roomId) {
				// 从服务器获取房间详情
				// 这里使用模拟数据
				console.log('获取房间详情，ID:', roomId);
			},
			callTenant() {
				// 拨打租户电话
				uni.makePhoneCall({
					phoneNumber: this.room.tenant.phone
				});
			},
			addTenant() {
				// 添加租户
				uni.showToast({
					title: '添加租户功能开发中',
					icon: 'none'
				});
			},
			updateUtility() {
				// 更新水电表读数
				uni.showToast({
					title: '更新读数功能开发中',
					icon: 'none'
				});
			},
			collectUtility() {
				// 收取水电费
				uni.showToast({
					title: '收取费用功能开发中',
					icon: 'none'
				});
			},
			editRoom() {
				// 编辑房屋信息
				uni.showToast({
					title: '编辑房屋功能开发中',
					icon: 'none'
				});
			},
			toggleRoomStatus() {
				// 切换房屋状态（出租/退租）
				if (this.room.status === '已出租') {
					// 退租操作
					uni.showModal({
						title: '确认退租',
						content: '确定要为该房间办理退租手续吗？',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({
									title: '退租功能开发中',
									icon: 'none'
								});
							}
						}
					});
				} else {
					// 出租操作
					uni.showToast({
						title: '出租功能开发中',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding-bottom: 120rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.section {
	background-color: #ffffff;
	border-radius: 12rpx;
	margin: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		border-left: 8rpx solid #007AFF;
		padding-left: 20rpx;
	}
}

.room-swiper {
	height: 400rpx;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
	
	.room-image {
		width: 100%;
		height: 100%;
	}
}

.room-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	
	.room-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-right: 20rpx;
	}
	
	.room-status {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.status-rented {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.status-empty {
		background-color: #f6ffed;
		color: #52c41a;
	}
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	
	.info-label {
		color: #999999;
		width: 140rpx;
	}
	
	.info-value {
		color: #333333;
		flex: 1;
		
		&.price {
			color: #f5222d;
			font-weight: bold;
		}
		
		&.warning {
			color: #fa8c16;
		}
	}
	
	.call-btn {
		background-color: #007AFF;
		color: #ffffff;
		font-size: 24rpx;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		margin-left: 20rpx;
	}
}

.facility-list {
	display: flex;
	flex-wrap: wrap;
	
	.facility-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		margin-bottom: 10rpx;
		
		text {
			margin-left: 8rpx;
			font-size: 26rpx;
		}
	}
}

.empty-tenant {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
	
	text {
		color: #999999;
		margin-bottom: 30rpx;
	}
	
	.add-tenant-btn {
		background-color: #007AFF;
		color: #ffffff;
		font-size: 28rpx;
		padding: 0 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
	}
}

.utility-item {
	background-color: #f9f9f9;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	
	.utility-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.utility-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		
		.utility-status {
			font-size: 24rpx;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
			background-color: #f6ffed;
			color: #52c41a;
			
			&.unpaid {
				background-color: #fff2e8;
				color: #fa541c;
			}
		}
	}
	
	.utility-details {
		.utility-row {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			font-size: 26rpx;
			
			.utility-label {
				color: #999999;
				width: 140rpx;
			}
			
			.utility-value {
				color: #333333;
				
				&.price {
					color: #f5222d;
					font-weight: bold;
				}
			}
			
			.utility-date {
				color: #999999;
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}
}

.utility-total {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 20rpx 0;
	font-size: 30rpx;
	
	.total-label {
		color: #333333;
	}
	
	.total-value {
		color: #f5222d;
		font-weight: bold;
		margin-left: 10rpx;
	}
}

.utility-actions {
	display: flex;
	justify-content: flex-end;
	
	button {
		font-size: 28rpx;
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		margin-left: 20rpx;
	}
	
	.update-btn {
		background-color: #ffffff;
		color: #007AFF;
		border: 1rpx solid #007AFF;
	}
	
	.collect-btn {
		background-color: #007AFF;
		color: #ffffff;
	}
}

.action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx;
	background-color: #ffffff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.action-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin: 0 10rpx;
	}
	
	.edit {
		background-color: #ffffff;
		color: #007AFF;
		border: 1rpx solid #007AFF;
	}
	
	.checkin {
		background-color: #52c41a;
		color: #ffffff;
	}
	
	.checkout {
		background-color: #f5222d;
		color: #ffffff;
	}
}
</style>
